<template>
	<view class="realNameAuthentication-page">
		
		<view class="head">
			<p>实名认证</p>
			<span>仅用于身份实名效验，使用审核制度，<br />信息将严格保密。</span>
			<image src="../../../static/images/my/realNameAuthentication/mipmap-xxxhdpi/2.png" class="icon"></image>
		</view>
		
		<view class="authentication">请您使用有效身份证信息认证</view>
		
		<view class="message">
			<view class="name">
				<span>姓名</span>
				<input placeholder="请输入" type="text"/>
			</view>
			<view class="mobile">
				<span>手机号</span>
				<input placeholder="请输入" type="number" maxlength = "18"/>
			</view>
			<view class="idNumber">
				<span>身份证号</span>
				<input placeholder="请输入" type="number" maxlength = "18"/>
			</view>
			<view class="confirm">确定</view>
		</view>
		
		<view class="return" @click="goToMine"><</view>
		
	</view>
</template>

<script setup>
	
	// 返回上一页
	const goToMine = () =>{
		uni.navigateBack({
			delta:1,
			animationType: 'pop-out',
			animationDuration: 1000,
		})
	}
	
</script>

<style lang="scss" scoped>
	// 背景
.realNameAuthentication-page{
	background-image: url('@/static/images/my/realNameAuthentication/mipmap-xxxhdpi/1.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
}
	// 返回
.return{
	position: absolute;
	// width: 20px;
	// height: 20px;
	left: 30px;
	top: 40px;
	font-size: 30px;
	color: #ffffff;
	// font-weight: bold;
}
	// 头部
.head{
	position: relative;
	// background-color: #aaff7f;
	width: 100%;
	height: 250px;
}
.head p{
	position: absolute;
	left: 20px;
	top: 100px;
	font-size: 25px;
	color: #318bed;
	font-weight: bold;
}
.head span{
	position: absolute;
	left: 20px;
	top: 140px;
	font-size: 15px;
}
.icon{
	position: absolute;
	top: 80px;
	right: 20px;
	width: 145px;
	height: 140px;
}
	// 信息认证
.authentication{
	width: 100%;
	height: 50px;
	border-radius: 20px 20px 0 0;
	background-color: #edf7ff;
	display: flex;
	align-items: center;
	font-weight: bold;
	padding-left: 20px;
	font-size: 17px;
}
	// 个人信息
.message{
	width: 100%;
	height: calc(100vh - 300px);
	padding-top: 40px;
	background-color: #ffffff;
}
.name{
	display: flex;
	align-items: center;
	font-size: 18px;
	width: 80%;
	height: 50px;
	margin: 0 auto;
	// margin-top: 40px;
	background-color: #F4F7F9;
	border-radius: 50px;
}
.name span{
	margin-left: 25px;
}
.name input{
	// background-color: #318BED;
	margin-left: 55px;
	
}
.mobile {
	display: flex;
	align-items: center;
	font-size: 18px;
	width: 80%;
	height: 50px;
	margin: 0 auto;
	margin-top: 20px;
	background-color: #F4F7F9;
	border-radius: 50px
}
.mobile span{
	margin-left: 25px;
}
.mobile input{
	// background-color: #318BED;
	margin-left: 38px;
}
.idNumber {
	display: flex;
	align-items: center;
	font-size: 18px;
	width: 80%;
	height: 50px;
	margin: 0 auto;
	margin-top: 20px;
	background-color: #F4F7F9;
	border-radius: 50px
}
.idNumber span{
	margin-left: 25px;
}
.idNumber input{
	// background-color: #318BED;
	margin-left: 22px;
}
.confirm{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 20px;
	width: 80%;
	height: 50px;
	margin: 0 auto;
	margin-top: 40px;
	background-color: #F4F7F9;
	border-radius: 50px;
	background: linear-gradient(to right, #3AACFF, #635CFF);
}
.Alipay{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: #318BED;
	width: 80%;
	height: 50px;
	margin: 0 auto;
	margin-top: 20px;
	border: #318BED 1px solid;
	border-radius: 50px
}
	       
</style>
